<template>
	<view class="modal">
		<view class="modal-mask" v-if="show" :key="1"></view>
		<view class="modal-box" v-if="show":key="2">
			<view class="modal-title" v-if="title">{{title}}</view>
			<view class="modal-input"><input type="text" :placeholder="placeholderTxt?placeholderTxt:'请输入'" v-model="text" :cursor-spacing="20"/></view>
			<view class="modal-img-upload">
				<image :src="img" class="img" v-if="img" @click="preview"></image>
				<image class="close" src="https://master.shengejiaju.cn/web/static/icons/ico_close@2x_white.png"  @click="del" v-if="img"></image>
				<image src="https://master.shengejiaju.cn/web/static/icons/ico_ad_pic02.png" class="upload-btn" @click="choseImg" v-if="!img"></image>
			</view>
			<view class="modal-btns">
				<view class="cancel" @click="cancel">{{cancelTxt?cancelTxt:'取消'}}</view>
				<view class="confirm" @click="confirm">{{confirmTxt?confirmTxt:'确认'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const md5 = require('../static/utils/md5')
	import host from '@/api/config.js'
	export default {
		props: ['show','title','confirmTxt','cancelTxt','placeholderTxt','value','icon'],
		data() {
			return {
				text: this.value? this.value:'',
				uploadParameter: {},
				img: ''
			};
		},
		mounted() {
			this.init()
			if(this.value){
				this.text = this.value
			}else{
				this.text = ''
			}
			if(this.icon){
				this.img = this.icon
			}
		},
		methods: {
			// 参数排序
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
						newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			init(){
				let data = {}
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					data.port = 'wechat'
				}else{
					data.port = 'h5'
				}
				// #endif
				
				// #ifdef APP-PLUS
				switch(uni.getSystemInfoSync().platform){
					case 'android':
						data.port = 'android'
					  break;
					case 'ios':
						data.port = 'ios'
					  break;
				}
				// #endif
				
				data.key = JSON.parse(uni.getStorageSync('userInfo')).token
				
				data.timestamp = Math.round(new Date() * 1000)
				// 获取签名开始
				let obj = 'jjds2020+'
				let newObj = this.objKeySort(data)
				for (let i in newObj){
					obj += i + '=' + newObj[i] +'&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5.hexMD5(obj)
				obj = obj.toUpperCase()
				// 获取签名结束
				data.sign = obj
				
				this.uploadParameter = data
			},
			cancel(){
				this.$emit('cancel')
			},
			confirm(){
				if(!this.text){
					uni.showToast({
						icon: 'none',
						title: '分类名称不能为空'
					})
					return false
				}
				let data = {
					text: this.text,
					img: this.img
				}
				this.$emit('confirm',JSON.stringify(data))
			},
			choseImg(){
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (choseRes) => {
						console.log(choseRes.tempFilePaths)
						uni.uploadFile({
							url: `${host}/api/Upimg/Upimg`, 
							filePath: choseRes.tempFilePaths[0],
							name: 'file',
							formData: {
								port: this.uploadParameter.port,
								key: this.uploadParameter.key,
								timestamp: this.uploadParameter.timestamp,
								sign: this.uploadParameter.sign
							},
							success: (uploadFileRes) => {
								this.img = JSON.parse(uploadFileRes.data).datas[0]
							}
						})
					}
				})
			},
			preview(){
				uni.previewImage({
					current: this.img,
					urls: [this.img]
				})
			},
			del(){
				this.img = ''
			}
		}
	}
</script>

<style lang="scss">
	.fade-enter-active, .fade-leave-active {
	  transition: opacity .5s;
	}
	.fade-enter, .fade-leave-to{
	  opacity: 0;
	}
	.modal{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		.modal-mask{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,.5);
		}
		.modal-box{
			width: 550rpx;
			background-color: #FFF;
			border-radius: 40rpx;
			position: relative;
			z-index: 1;
			.modal-title{
				text-align: center;
				font-size: 36rpx;
				padding: 45rpx 0 80rpx;
			}
			.modal-input{
				padding: 0 25rpx;
				input{
					background-color: #EEE;
					padding: 20rpx;
					font-size: 28rpx;
				}
			}
			.modal-img-upload{
				margin: 40rpx 25rpx;
				.close{
					background-color: red;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
				}
				.img{
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
				}
				.upload-btn{
					width: 80rpx;
					height: 80rpx;
				}
			}
			.modal-btns{
				display: flex;
				border-top: solid 1px #EEE;
				view{
					flex: 1;
					text-align: center;
					height: 100rpx;
					line-height: 100rpx;
					color: #999;
					&.confirm{
						color: #2073F5;
						border-left: solid 1px #EEE;
					}
				}
			}
		}
	}
</style>